<template>
  <div>
    <a-table
      :columns="column"
      row-key="id"
      :data-source="data"
      :pagination="false"
      :scroll="{ x: scrollX, y: 'calc(100vh - 400px)' }"
      :row-selection="{ selectedRowKeys: selectedRowKeys, columnTitle: '', onChange: onSelectChange }"
    >
      <!-- 物品信息-->
      <template #goodsInfo="text, record">
        <a-input placeholder="请选择" :read-only="true" @click="showSelect(record)" :value="goodsNameText(record)">
          <a-icon slot="suffix" type="down" style="color: #cdcdcd; font-size: 12px" class="down-icon" />
          <!-- <a-icon
            slot="suffix"
            type="close-circle"
            theme="filled"
            class="close-icon"
            @click="getSelectValue(false, '', [], props.rowId)"
          /> -->
        </a-input>
        <!-- <a-button>{{
          `${record.serialNumber ? record.serialNumber + ' | ' : ''}${record.serialName ? record.serialName : ''}`
        }}</a-button> -->
      </template>

      <!-- 数量-->
      <template #saleNum="text, record, index">
        <span style="display: flex" class="my-style">
          <a-form-model :rules="formRules" :model="record" :ref="`saleNum` + record.id">
            <a-form-model-item prop="saleNum">
              <a-input
                v-model="record.saleNum"
                placeholder="请输入"
                @change="changeNum(index, $event, 'saleNum')"
              ></a-input>
            </a-form-model-item>
          </a-form-model>
          <span style="line-height: 32px; margin-left: 4px">{{ record.assistUnit }}</span>
        </span>
      </template>

      <template #actions="text, record, index">
        <span style="color: #1890ff; cursor: pointer" @click="handleCopy(record, index)" v-if="!record.copy">复制</span>
        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record, index)">
          <span style="color: #1890ff; cursor: pointer; margin-left: 10px">删除</span>
        </a-popconfirm>
      </template>
    </a-table>
  </div>
</template>
<script>
import { TreeSelect } from 'ant-design-vue'

const SHOW_PARENT = TreeSelect.SHOW_PARENT
export default {
  name: 'salesContractFormTable',
  props: {
    value: {
      type: Array | null,
    },
    list: {
      type: Array | [],
    },
    treeData: {
      type: Array | [],
    },
    wareHouseId: {
      type: String,
    },
    itemInfo: {
      type: Object,
    },
  },
  watch: {
    value: {
      handler() {
        this.data = this.value
      },
    },
  },
  computed: {
    scrollX() {
      let xnum = 0
      for (let item of this.column) {
        xnum += Number(item.width) || 0
      }
      return xnum
    },
  },
  data() {
    return {
      data: [],
      selectedRowKeys: [],
      SHOW_PARENT,
      replaceFields: {
        children: 'children',
        title: 'name',
        label: 'name',
        key: 'id',
        value: 'id',
      },
      column: [
        {
          title: '物品',
          dataIndex: 'goodsInfo',
          width: 280,
          ellipsis: true,
          fixed: 'left',
          scopedSlots: { customRender: 'goodsInfo' },
        },
        {
          title: '规格',
          dataIndex: 'serialSpecifications',
          key: 'serialSpecifications',
          width: 100,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '单位',
          dataIndex: 'serialUnit',
          key: 'serialUnit',
          width: 100,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '数量',
          dataIndex: 'saleNum',
          key: 'saleNum',
          width: 180,
          ellipsis: true,
          scopedSlots: { customRender: 'saleNum' },
        },
      ],
      areaAndLocationDatas: [],
      formRules: {
        operationForm: [{ required: true, message: '请选择', trigger: 'change' }],
        saleNum: [{ required: true, message: '请输入', trigger: 'change' }],
        goodsScrapNum: [{ required: true, message: '请输入', trigger: 'change' }],
      },
    }
  },
  methods: {
    showSelect(goods) {
      this.$emit('showSelect', goods)
    },
    goodsNameText(item) {
      return `${item.serialNumber ? item.serialNumber + ' | ' : ''}${item.serialName ? item.serialName : ''}`
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
    },
    openProductTable() {},

    changeNum(index, e, type) {
      if (type == 'goodsScrapNum') {
        this.data[index].goodsScrapNum = e.target.value
      } else if (type == 'saleNum') {
        this.data[index].saleNum = e.target.value
      }
    },
    generateUniqueID() {
      return Math.random().toString(36).substr(2, 9)
    },
    // 复制
    handleCopy(row, index) {
      let data = JSON.parse(JSON.stringify(row))
      this.data.splice(index + 1, 0, data)
      this.$forceUpdate()
    },
    // 删除
    handleDelete(record, index) {
      this.data.splice(index, 1)
    },
    //校验
    checkForm() {
      if (this.selectedRowKeys.length) {
        console.log(this.selectedRowKeys, this.data)
        let passedNum = 0
        let selectList = []
        for (const key of this.selectedRowKeys) {
          const record = this.data.find((item) => item.id == key)
          this.data.forEach((item) => {
            if (item.id == key) {
              selectList.push(item)
            }
          })

          this.$refs[`saleNum${record.id}`].validate((valid) => {
            if (valid) {
              passedNum += 1
            }
          })
        }
        if (passedNum === this.selectedRowKeys.length * 1) {
          return {
            passed: true,
            selectList: selectList,
          }
        }
      } else {
        return 'no-select'
      }
    },
  },
}
</script>
<style scoped lang="less">
.my-style /deep/ .ant-form-item {
  margin-bottom: 0;
}
</style>
